<template>	
  <div >	
    <div id="fixed-header" v-if="!fixed">	
      <fixed-header></fixed-header>	
    </div>	
    <!-- <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0" transition-name="fade"/> -->	
    <we-chat :custom-style="myBackToTopStyle" :visibility-height="1" :back-position="0" transition-name="fade"></we-chat>	
    <shop-cart :custom-style="shopCartStyle" :visibility-height="200" :back-position="0" transition-name="fade"></shop-cart>	
    <el-backtop :bottom="40" :visibility-height="300">	
    <!-- <i class="iconfont el-icon-ali-xiaochengxu" @mouseover="log()"></i> -->	
    </el-backtop>	
    <el-container>	
      <home-header></home-header>	
      <el-header id="header-bar">	
        <nav-bar></nav-bar>	

        <!-- Header content -->	
      </el-header>	
      <el-main>	
        <!-- Main content -->	

      </el-main>	

      <el-footer >	
        <home-footer></home-footer>	
      </el-footer>	
    </el-container>	
  </div>	

</template>	
<script>	
import HomeHeader from '../../common/components/Header'	
import NavBar from '../../common/components/NavBar'	
import HomeFooter from '../../common/components/Footer'	
import FixedHeader from '../../common/components/FixedHeader'	
import BackToTop from '../../common/backtop/BackToTop'	
import ShopCart from '../../common/shopcart/ShopCart'	
import WeChat from '../../common/wechat/Wechat'	
export default {	
  name: 'GoodsDetails',	
  data () {	
    return {	
      searchBarFixed: false,	
      fixed: false,	
      componentId: '',	
      myBackToTopStyle: {	
        right: '40px',	
        bottom: '140px',	
        width: '40px',	
        height: '40px',	
        borderRadius: '20px',	
        lineHeight: '40px', // 请保持与高度一致以垂直居中	
        background: 'white', // 按钮的背景颜色	
        'z-index': '200',	
        color: '#409eff',	
        'font-size': '20px'	
      },	
      shopCartStyle: {	
        right: '40px',	
        bottom: '90px',	
        width: '40px',	
        height: '40px',	
        borderRadius: '20px',	
        lineHeight: '40px', // 请保持与高度一致以垂直居中	
        background: 'white', // 按钮的背景颜色	
        'z-index': '200',	
        color: '#409eff',	
        'font-size': '20px'	
      }	
    }	
  },	
  mounted () {	
    window.addEventListener('scroll', this.handleScroll)	
  },	
  components: {	
    HomeHeader: HomeHeader,	
    NavBar: NavBar,	
    // HomeContainer: HomeContainer,	
    HomeFooter: HomeFooter,	
    BackToTop: BackToTop,	
    ShopCart: ShopCart,	
    WeChat: WeChat,	
    FixedHeader: FixedHeader	
  },	
  methods: {	
    login: function () {	
      this.$router.push('/login')	
    },	
    register: function () {	
      this.$router.push('/register')	
    },	
    handleScroll: function () {	
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop	
      // console.log('scrollTop:' + scrollTop)	
      let offsetTop = 145	
      // console.log('offsetTop:' + offsetTop)	
      if (scrollTop > offsetTop) {	
        this.fixed = false	
      } else {	
        this.fixed = true	
      }	
      // console.log(this.searchBarFixed)	
    },	
    log: function () {	
      console.log('ssssssss')	
      window.pageYOffset = 0	
    }	
  }	
}	
</script>	
<style scoped>	
#header-bar {	
  height: 80px !important;	
  background: white;	
  box-shadow:0px 15px 10px -15px #ccc;	
  width: 100%;	
}	
.el-container {	
  background: #ededed;	
}	
#header-bar2 {	
  position: fixed	
}	
.el-main {	
  position: relative	
}	
.el-footer {	
  padding: 0px;	
  height: 330px;	
}	
.shop-cart {	
  position: fixed;	
  z-index: 200;	
  bottom: 40px;	
  right: 40px;	
  height: 40px;	
  width: 40px;	
  background: #ededed;	
  text-align: center;	
  vertical-align: middle;	
  border-radius: 20px;	
  /* padding-top: 10px; */	
  line-height: 20px;	
}	
.el-main {	
  height: 1000px;	
}	
#fixed-header {	
  width: 100%;	
  height: 70px;	
  position: fixed;	
  background: #333333;	
  z-index: 20;	
  margin-top: -10px;	
  margin-bottom: -10px	
}